<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复兴豆芽厂每日销售情况</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="./jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        .smart-green {
            margin-left: auto;
            margin-right: auto;
            max-width: 900px;
            background: #9DC45F;

            font: 12px Arial, Helvetica, sans-serif;
            color: #666;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
        }

        .button {
            background-color: #9DC45F;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-border-radius: 5px;
            border: none;
            padding: 10px 10px 10px 10px;
            color: #FFF;
            text-shadow: 1px 1px 1px #949494;
            width: 100px;
            height: 50px;
            text-align: center;
            font-size: large;
        }
        .smallBut{
            width: 50px;
            height: 50px;
        }
        table.simple-table {
            border-collapse: collapse; /* 合并边框 */
            width: 100%;
            font-family: Arial, sans-serif; /* 设置字体 */
        }

        table.simple-table th,
        table.simple-table td {
            border: 1px solid #ccc; /* 表格边框颜色 */
            padding: 8px;
            text-align: center;
        }

        table.simple-table th {
            background-color: #f2f2f2; /* 表头背景色 */
        }
        .changeBill{
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>
<script>
    $(function () {
        $("#startDate").datepicker({
            dateFormat: 'yy-mm-dd', dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            prevText: "上月",
            nextText: "下月",
            closeText: "关闭"
        });
        $("#endDate").datepicker({
            dateFormat: 'yy-mm-dd', dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            prevText: "上月",
            nextText: "下月",
            closeText: "关闭"
        });
        var param = getUrlParams();
        var currentDate = new Date();
        var year = currentDate.getFullYear();
        var month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
        var day = ('0' + currentDate.getDate()).slice(-2);
        var startDate,endDate;
        if(typeof param.startDate!== "undefined"){
            startDate=param.startDate
        }else{
            startDate=year + '-' + month + '-' + day;
        }
        if(typeof param.endDate!== "undefined"){
            endDate=param.endDate
        }else{
            endDate=year + '-' + month + '-' + day;
        }
        $('#startDate').val(startDate);
        $('#endDate').val(endDate);
        $("#startDate").on('change keyup', function () {
            $('#myTbody').empty();
            startDate= $("#startDate").val();
            changeValue();
        });
        $("#endDate").on('change keyup', function () {
            $('#myTbody').empty();
            endDate= $("#endDate").val();
            changeValue();
        });

        // 绑定事件委托
        $('#table_data tbody').on('click', '.changeBill', function() {
            var billId=$(this).attr("content");
            if(typeof billId!== "undefined"){
                window.location.href = '/sub_page.html?billId='+billId+'&startDate='+startDate+'&endDate='+endDate;
            }
        });
        changeValue();
        function changeValue() {
            var startDate = $("#startDate").val();
            var endDate = $("#endDate").val();
            $.ajax({
                url: "getBill?startDate="+startDate+"&endDate="+endDate, dataType: "json", success: function (result) {
                    var list = result.bills;
                    for (let i = 0; i < list.length; i++) {
                        var inClassName= (list[i].inComeBillId === undefined||list[i].inComeBillId === null)?"":"changeBill";
                        var outClassName= (list[i].outComeBillId === undefined||list[i].outComeBillId === null)?"":"changeBill";
                        $("#table_data tbody").append("<tr>" +
                            "<td>"+list[i].inComeBillDate + "</td>" +
                            "<td>"+list[i].inComeBillDesc + "</td>" +
                            "<td class='"+inClassName+"' content='"+list[i].inComeBillId+"'>"+list[i].inComeBillAmount +"</td>" +
                            "<td>"+list[i].outComeBillDate + "</td>" +
                            "<td>"+list[i].outComeBillDesc + "</td>" +
                            "<td class='"+outClassName+"' content='"+list[i].outComeBillId+"'>"+list[i].outComeBillAmount +"</td>" +
                            "</tr>");
                    }
                }
            });
        }
        function getUrlParams() {
            var searchParams = new URLSearchParams(window.location.search);
            var params = {};
            for (var key of searchParams.keys()) {
                params[key] = searchParams.get(key);
            }
            return params;
        }

        $('#addBill').click(function () {
            window.location.href = '/sub_page.html?billId=-1&startDate='+startDate+'&endDate='+endDate;;
        });

    });
</script>
<body>
<div class="smart-green">
    <input class="button" id="startDate" value="开始日期"/>
    <input class="button" id="endDate" value="结束日期"/>
    <input class="button" id="addBill" value="新增账单"/>
</div>
<table id="table_data" class="simple-table">
    <thead>
    <tr>
        <th colspan="3">收入</th>
        <th colspan="3">支出</th>
    </tr>
    <tr>
        <th>日期</th>
        <th>类型</th>
        <th>金额</th>
        <th>日期</th>
        <th>类型</th>
        <th>金额</th>
    </tr>
    </thead>
    <tbody id="myTbody">

    </tbody>
</table>
</body>

</html>